<template>
  <section id="yg_background">
    <img
      class="yg_background_img"
      :style="{ ...imgStyle, backgroundColor }"
      :src="imgSrc"
      alt=""
    />
    <div class="yg_background_content">
      <!-- <h1 class="title">{{ 1 }}</h1>
      <span class="content">{{ 2 }}</span> -->
      <slot name="default">
        <!-- 这是 default 插槽的后备内容 -->
      </slot>
    </div>
  </section>
</template>

<script>
export default {
  name: "YgBackground",
  props: {
    imgStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    imgSrc: {
      type: String,
      default: "",
    },
    backgroundColor: {
      type: String,
      default: "#FAFAFA",
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/global_variable.scss";
#yg_background {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  & > .yg_background_img {
    width: 100%;
    object-fit: cover;
  }
  & > .yg_background_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    & > .yg_background_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      & > .title {
        margin: 0;
        margin-top: $px_header_height;
        font-size: 32px;
        font-weight: 400;
        color: #fff;
        line-height: 40px;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.24);
      }
      & > .content {
        margin: 0;
        margin-top: 4px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        line-height: 24px;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.32);
      }
    }
  }
}
</style>
